<!-- 展示 》 多选状态 -->

<template>
  <el-form-item v-bind="formItem">
    <!-- 标签 -->
    <template v-if="formItem.label" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <div :class="className">
      <slot :text="trans(model)">
        <span v-for="(text, i) in trans(model)" :key="i" :class="textClass[i]" :style="textStyle[i]">
          {{ text }}
        </span>
      </slot>
    </div>
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixShow from '../mixShow'
import FormStatus from '../../form/FormStatus'

const name = 'ShowStatusMulti'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixShow],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 状态字典
     */
    STATUS: FormStatus.computed.STATUS,

    /**
     * 颜色数据
     */
    colorData() {
      const { model, STATUS, colorIndex } = this

      return model.map((item) => {
        // 是否有颜色
        const matched = STATUS.find((status) => status[0] === item) || []
        const color = matched[colorIndex]
        if (!color) return null

        // 颜色是否有效
        const colorData = CORE.DICT.COLOR.find(([, en]) => color === en)
        if (!colorData) return null

        return colorData
      })
    },

    /**
     * 文本样式类
     */
    textClass() {
      const { className, colorData } = this
      return colorData.map((color) => {
        if (!color) return `${className}-text`
        return `${className}-text ${className}-${color[1]}`
      })
    },

    /**
     * 文本样式对象
     */
    textStyle() {
      const { colorData, hasColor, hasBorder, hasBackground } = this
      return colorData.map((color) => {
        const style = {}
        if (color) {
          if (hasColor) style.color = color[2]
          if (hasBorder) style.borderColor = color[3]
          if (hasBackground) style.backgroundColor = color[4]
        }
        return style
      })
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 转换方法
     */
    trans(value) {
      const { STATUS, empty } = this
      return value.map((item) => CORE.dict(STATUS, item) || empty)
    },
  },
}
</script>
